<template>
    <div class="footer" style="height: 60px;">
    	<div class="footer2" ref='footer'>
    		<div class="footer2_div" v-for="(data,key) in footlist" @click="jump(data.url,key)" :class="(key==2)?'footer22_div':''">
    			<img :src="foot_i==key?data.img2:data.img1">
    			<p v-if="foot_i==key" style="color: #f7bd40;">{{data.name}}</p>
    			<p v-else>{{data.name}}</p>
    		</div>
    		<div style="clear: both;"></div>
    	</div>
    	
    </div>
</template>

<script>
	import Vue from 'vue';
    export default {
    	watch:{
    		'$route':'bianhua'
    	},
    	components:{
        },
    	props:[
    	
    	],
        data: function(){
            return {
                footlist:[{
                	url:'homePage',
                	img1:'static/img/images/foot1_1.png',
                	img2:'static/img/images/foot1_2.png',
                	name:'名店'
                },{
                	url:'liang',
                	img1:'static/img/images/foot2_1.png',
                	img2:'static/img/images/foot2_2.png',
                	name:'良品'
                },{
                	url:'jiang',
                	img1:'static/img/images/foot5_1.png',
                	img2:'static/img/images/foot5_2.png',
                	name:'匠商'
                },{
                	url:'tong',
                	img1:'static/img/images/foot3_1.png',
                	img2:'static/img/images/foot3_2.png',
                	name:'同城'
                },{
                	url:'wode',
                	img1:'static/img/images/foot4_1.png',
                	img2:'static/img/images/foot4_2.png',
                	name:'匠屋'
                },],
                foot_i:0,
            }
        },
        mounted(){
        	
        	switch(this.$route.path){
        		case '/homePage':
        			this.foot_i=0;
        			break;
        		case '/liang':
        			this.foot_i=1;
        			break;
        		case '/jiang':
        			this.foot_i=2;
        			break;
        		case '/tong':
        			this.foot_i=3;
        			break;
        		case '/wode':
        			this.foot_i=4;
        			break;
        	}
        	
        },
        methods: {
        	
            jump(url,type){
            	
            	
            	this.foot_i=type;
            	this.$router.push({
        			path: '/'+url,
				})
            	
            	
            	
            },
            bianhua(){
            	switch(this.$route.path){
	        		case '/dongtai':
	        			this.foot_i=0;
	        			break;
	        		case '/homePage':
	        			this.foot_i=1;
	        			break;
	        		case '/faxian':
	        			this.foot_i=2;
	        			break;
	        		case '/tong':
	        			this.foot_i=3;
	        			break;
	        		case '/wode':
	        			this.foot_i=4;
	        			break;
	        	}
            }
        }
    }
</script>

<style scoped>
	.footer{
		display: block;
	}
	.footer1{
		width: 100%;
		background-color: transparent;
	}
	.footer2{
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		height: 50px;
		width: 100%;
		background: #1a1a1a;
	}
	.footer2_div{
		padding: 8px 0;
		width: 20%;
		float: left;
		color: #fff;
		text-align: center;
		position: relative;
		
	}
	
	.footer1 .footer2_div{
		height: 3.6rem;
		border-top: 0;
	}
	.footer2_div p{
		font-size: 11px;
		line-height: 1.8rem;
		
	}
	.footer2_div img{
		display: block;
		width: 2rem;
		margin: 0 auto;
	}
	.show{
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		opacity: 0;
	}
	.hidden{
		position:static;
	}
	.footer22_div{
		padding: 0;
	}
	.footer22_div p{
		display: none;
	}
	.footer22_div img{
		height: 55px;
		width: auto;
		display: block;
		margin: 0 auto;
		margin-top: -15px;
	}
</style>